<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch && !hideUI"
      label-width="68px">
      <el-form-item label="校区" prop="cellId">
        <el-select v-model="queryParams.cellId" placeholder="请选择校区" clearable @change="handleQueryCellChange">
          <el-option v-for="item in cellOptions" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!--      <el-form-item label="电话" prop="phone">
        <el-input v-model="queryParams.phone" placeholder="请输入电话" clearable @keyup.enter.native="handleQuery" />
      </el-form-item> -->
      <el-form-item label="学工号" prop="idCardNumber">
        <el-input v-model="queryParams.idCardNumber" placeholder="请输入学生号码" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="卡号" prop="cardNo">
        <el-input v-model="queryParams.cardNo" placeholder="请输入卡号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="物理卡号" prop="sFactoryFixId">
        <el-input v-model="queryParams.sFactoryFixId" placeholder="请输入物理卡号" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <!-- <el-form-item label="楼栋" prop="unitId">
        <el-select v-model="queryParams.unitId" placeholder="请选择楼栋" clearable @change="handleQueryUnitChange" :disabled="!queryParams.cellId">
          <el-option
            v-for="item in unitOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="楼层" prop="floorId">
        <el-select v-model="queryParams.floorId" placeholder="请选择楼层" clearable @change="handleQueryFloorChange" :disabled="!queryParams.unitId">
          <el-option
            v-for="item in floorOptions"
            :key="item.id"
            :label="item.floorName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="房间" prop="homeId">
        <el-select v-model="queryParams.homeId" placeholder="请选择房间" clearable :disabled="!queryParams.floorId">
          <el-option
            v-for="item in homeOptions"
            :key="item.id"
            :label="item.roomName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>-->
      <el-form-item label="入住状态" prop="isFlag">
        <el-select v-model="queryParams.isFlag" placeholder="请选择入住状态" clearable>
          <el-option v-for="dict in dict.type.ruzhu_status_type" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
     <el-form-item label="待发卡片" prop="keyCardCountType">
        <el-select v-model="queryParams.keyCardCountType" placeholder="请选择状态" clearable>
          <el-option v-for="dict in dict.type.ready_card" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['tenantuser:tenant:add']">新增</el-button>
      </el-col>
      <!--     <el-col :span="1.5" v-if="!hideUI">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['tenantuser:tenant:edit']">修改</el-button>
      </el-col> -->
      <!-- <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['tenantuser:tenant:remove']"
        >删除</el-button>
      </el-col> -->
      <el-col :span="1.5" v-if="!hideUI">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['tenantuser:tenant:export']">导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-dropdown @command="handleSyncCommand" v-hasPermi="['tenantuser:tenant:sync']">
          <el-button type="success" plain icon="el-icon-refresh" size="mini">
            同步学校数据<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <!-- <el-dropdown-item command="all">全量同步</el-dropdown-item> -->
            <el-dropdown-item command="current">增量变更数据</el-dropdown-item>
            <!-- <el-dropdown-item command="test">测试同步</el-dropdown-item> -->
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="tenantList" @selection-change="handleSelectionChange">
      <el-table-column label="姓名" align="center" prop="name" />
      <el-table-column label="类别" align="center" prop="type">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.relation" :value="scope.row.type" />
        </template>
      </el-table-column>
      <el-table-column label="卡号" align="center" prop="cardNo" />

      <el-table-column label="学工号" align="center" prop="idCardNumber" />

      <el-table-column label="物理卡号" align="center" prop="sfactoryFixId" />



      <!-- <el-table-column label="电话" align="center" prop="phone" /> -->

      <!--     <el-table-column label="位置信息" align="center" width="280" v-if="!hideUI">
        <template slot-scope="scope">
          <span>{{ scope.row.cellName || '' }}-{{ scope.row.unitName || '' }}-{{ scope.row.floorName || '' }}-{{ scope.row.roomName || '' }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="入住状态" align="center" prop="roomCount">
        <template slot-scope="scope">
          <el-tag :type="scope.row.roomCount > 0 ? 'success' : 'info'">
            {{ scope.row.roomCount > 0 ? '已入住' : '未入住' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="房间数/卡片数" align="center" prop="roomCount">
        <template slot-scope="scope">
          {{ scope.row.roomCount}}/{{scope.row.keyCardCount}}
        </template>
      </el-table-column>
    <!--  <el-table-column label="卡号变更" align="center" prop="sCardChange">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.s_card_change" :value="scope.row.scardChange" />
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="创建时间" align="center" prop="createTime" /> -->
      <el-table-column label="备注" align="center" prop="remark" />
      <!--      <el-table-column label="删除标识" align="center" prop="flgDelete">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.delete_flg_type" :value="scope.row.flgDelete" />
          </template>
        </el-table-column> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-key" @click="handleRuzhu(scope.row)"
            v-hasPermi="['lock:tenantkey:edit']">办理入住</el-button>
          <el-button size="mini" type="text" icon="el-icon-key" @click="handleKeyAuth(scope.row)"
            v-hasPermi="['lock:tenantkey:edit']">办理钥匙</el-button>
          <el-button size="mini" type="text" icon="el-icon-switch-button" @click="handleCheckOut(scope.row)"
            v-hasPermi="['tenantuser:tenant:tuifang']" v-if="scope.row.roomCount > 0"
            style="color: #f56c6c;">退房</el-button>
          <!-- <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)"
            v-hasPermi="['tenantuser:tenant:query']">详情</el-button> -->
          <!--     <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['tenantuser:tenant:edit']">修改</el-button> -->
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['tenantuser:tenant:remove']"
          >删除</el-button> -->
          <!-- 合同按钮去掉 -->
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-tickets"
            @click="handleContract(scope.row)"
            v-hasPermi="['lock:tenantkey:edit']"
          >合同</el-button> -->
          <!--  <el-button
            size="mini"
            type="text"
            icon="el-icon-s-tools"
            @click="handleStatus(scope.row)"
            v-hasPermi="['tenantuser:tenant:edit']"
          >状态管理</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改人员信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="750px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <!-- 基本信息 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入电话" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="卡号" prop="cardNo">
              <el-input v-model="form.cardNo" placeholder="请输入卡号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-select v-model="form.gender" placeholder="请选择性别">
                <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label"
                  :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>
        <!-- 学生信息 -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="学生号码" prop="idCardNumber">
              <el-input v-model="form.idCardNumber" placeholder="请输入学生号码" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 位置信息 -->
        <template v-if="!hideUI">
          <el-row>
            <el-col :span="12">
              <el-form-item label="校区" prop="cellId">
                <el-select v-model="form.cellId" placeholder="请选择校区" clearable @change="handleCellChange">
                  <el-option v-for="item in cellOptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">

              <el-form-item label="类别" prop="type">
                <el-select v-model="form.type" placeholder="请选择类别">
                  <el-option v-for="dict in dict.type.relation" :key="dict.value" :label="dict.label"
                    :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <!--   <el-col :span="12">
              <el-form-item label="楼栋" prop="unitId">
                <el-select v-model="form.unitId" placeholder="请选择楼栋" clearable @change="handleUnitChange" :disabled="!form.cellId">
                  <el-option
                    v-for="item in unitOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col> -->
          </el-row>
          <!-- <el-row>
            <el-col :span="12">
              <el-form-item label="楼层" prop="floorId">
                <el-select v-model="form.floorId" placeholder="请选择楼层" clearable @change="handleFloorChange" :disabled="!form.unitId">
                  <el-option
                    v-for="item in floorOptions"
                    :key="item.id"
                    :label="item.floorName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="房间" prop="homeId">
                <el-select v-model="form.homeId" placeholder="请选择房间" clearable :disabled="!form.floorId">
                  <el-option
                    v-for="item in homeOptions"
                    :key="item.id"
                    :label="item.roomName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row> -->
        </template>
        <!-- 其他信息 -->

        <!-- 备注信息 -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 详情对话框 -->
    <!-- <el-dialog :visible.sync="detailOpen" title="人员详情" width="80%">
      <el-tabs v-model="activeTab" @tab-click="handleTabChange">
        <el-tab-pane label="基本信息" name="base">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="姓名">{{ detailForm.name || '-' }}</el-descriptions-item>
            <el-descriptions-item label="电话">{{ detailForm.phone || '-' }}</el-descriptions-item>
            <el-descriptions-item label="学工号">{{ detailForm.idCardNumber || '-' }}</el-descriptions-item>
            <el-descriptions-item label="性别">
              <dict-tag :options="dict.type.sys_user_sex" :value="detailForm.gender" />
            </el-descriptions-item>
            <el-descriptions-item label="入住状态">
              <dict-tag :options="dict.type.ruzhu_status_type" :value="detailForm.isFlag" />
            </el-descriptions-item>
            // <el-descriptions-item label="入住房间数">{{ detailForm.roomCount || 0 }} 间</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ detailForm.createTime || '-' }}</el-descriptions-item>
            <el-descriptions-item label="备注">{{ detailForm.remark || '-' }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

        <el-tab-pane label="入住房间信息" name="rooms">
          <div v-if="detailForm.abuildHomes && detailForm.abuildHomes.length > 0" class="room-info-table">
            <el-table :data="detailForm.abuildHomes" border style="width: 100%">
              <el-table-column label="房间号" align="center" prop="roomName" width="120" />
              <el-table-column label="校区" align="center" prop="cellName" width="180" />
              <el-table-column label="楼栋" align="center" prop="unitName" width="150" />
              <el-table-column label="楼层" align="center" prop="floorName" width="100" />
              <el-table-column label="入住开始时间" align="center" prop="startTime" width="180" />
              <el-table-column label="入住结束时间" align="center" prop="endTime" width="180" />
              <el-table-column label="房间状态" align="center" width="100" class-name="room-status-tag">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.roomStatus === 1 ? 'success' : 'danger'">
                    {{ scope.row.roomStatus === 1 ? '正常' : '异常' }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-empty v-else description="暂无入住房间信息"></el-empty>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailOpen = false">关闭</el-button>
      </span>
    </el-dialog> -->

    <!-- 钥匙授权对话框 -->
    <el-dialog title="办理钥匙" :visible.sync="keyAuthDialogVisible" width="48%" :close-on-click-modal="false"
      :close-on-press-escape="false">
      <div class="key-auth-content">
        <!-- 房间信息组件 -->
        <div class="room-component-section">
          <Home v-if="keyAuthDialogVisible" :key="keyAuthComponentKey" :roomData="detailForm"
            :userInfo="currentKeyAuthUser" :loading="loading" @refresh="refreshRoomData" @add-room="handleAddRoom"
            @show-key-auth-dialog="handleShowKeyAuthDialog" />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="keyAuthDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 授权钥匙组件 -->
    <ruzhu ref="ruzhu" @refresh="getList"></ruzhu>

    <!-- 钥匙授权组件 -->
    <key-auth ref="keyAuth" @refresh="getList" />



    <!-- 添加状态管理对话框 -->
    <el-dialog :title="'人员状态管理'" :visible.sync="statusDialog" width="400px">
      <el-form ref="statusForm" :model="statusForm" label-width="100px">
        <el-form-item label="姓名">
          <span>{{ currentTenant.name }}</span>
        </el-form-item>
        <el-form-item label="房间">
          <span>{{ currentTenant.roomName }}</span>
        </el-form-item>
        <el-form-item label="入住状态" prop="isFlag">
          <el-select v-model="statusForm.isFlag" placeholder="请选择入住状态">
            <el-option v-for="dict in dict.type.ruzhu_status_type" :key="dict.value" :label="dict.label"
              :value="parseInt(dict.value)"></el-option>
          </el-select>
          <!-- 添加退租警告提示 -->
          <div v-if="statusForm.isFlag === 2" class="warning-tip">
            <i class="el-icon-warning"></i> 警告：如果退租，人员下的钥匙请手动删除
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitStatusForm">确 定</el-button>
        <el-button @click="statusDialog = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 退房进度对话框 -->
    <el-dialog title="退房进度" :visible.sync="checkoutProgressVisible" width="600px" :close-on-click-modal="false"
      :close-on-press-escape="false" :show-close="checkoutProgress.status !== 'processing'">
      <div class="checkout-progress-content">
        <!-- 用户信息 -->
        <div class="user-info">
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="用户姓名">{{ checkoutProgressData.name }}</el-descriptions-item>
            <el-descriptions-item label="学工号">{{ checkoutProgressData.idCardNumber }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 进度条 -->
        <div class="progress-section">
          <div class="progress-header">
            <span class="progress-title">退房进度</span>
            <span class="progress-text">{{ checkoutProgress.current }}/{{ checkoutProgress.total }}</span>
          </div>
          <el-progress
            :percentage="checkoutProgress.total > 0 ? Math.round((checkoutProgress.current / checkoutProgress.total) * 100) : 0"
            :status="checkoutProgress.status === 'error' ? 'exception' : checkoutProgress.status === 'success' ? 'success' : ''"
            :stroke-width="8" />
          <div class="progress-status">
            <el-tag :type="getProgressStatusType()" size="small">
              {{ getProgressStatusText() }}
            </el-tag>
          </div>
        </div>

        <!-- 当前状态消息 -->
        <div class="status-message" v-if="checkoutProgress.message">
          <i class="el-icon-info"></i>
          <span>{{ checkoutProgress.message }}</span>
        </div>

        <!-- 详细进度列表 -->
        <div class="progress-details" v-if="checkoutProgress.details.length > 0">
          <div class="details-header">
            <span>详细进度</span>
            <el-button
              type="primary"
              size="mini"
              @click="copyAllCheckoutFailureInfo"
              style="float: right; margin-left: 10px;"
              title="复制所有退房失败信息">
              <i class="el-icon-document-copy"></i>
              一键复制失败信息
            </el-button>
          </div>
          <el-table :data="checkoutProgress.details" size="small" border>
            <el-table-column label="校区" prop="cellName" width="100" />
            <el-table-column label="楼栋" prop="unitName" width="100" />
            <el-table-column label="楼层" prop="floorName" width="100" />
            <el-table-column label="房间" prop="roomName" width="120" />
            <el-table-column label="状态" width="80">
              <template slot-scope="scope">
                <el-tag :type="getDetailStatusType(scope.row.status)" size="mini">
                  {{ getDetailStatusText(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="失败原因" prop="errorReason" min-width="200" />
            <el-table-column label="时间" prop="time" width="120" />
          </el-table>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button v-if="checkoutProgress.status === 'processing'" type="primary" disabled>
          处理中...
        </el-button>
        <el-button v-else-if="checkoutProgress.status === 'success'" type="success"
          @click="checkoutProgressVisible = false">
          完成
        </el-button>
        <el-button v-else-if="checkoutProgress.status === 'error'" type="danger"
          @click="checkoutProgressVisible = false">
          关闭
        </el-button>
        <el-button v-if="checkoutProgress.status !== 'processing'" @click="checkoutProgressVisible = false">
          关闭
        </el-button>
      </div>
    </el-dialog>

    <!--    <el-empty v-if="tenantList.length === 0 && !loading" description="暂无人员信息"></el-empty> -->
  </div>
</template>

<script>
  import {
    listTenant,
    getTenant,
    delTenant,
    addTenant,
    updateTenant,
    updateTenantStatus,
    apartmentRoomCheckOut,
    syncOracleAll,
    syncOracleCurrent,
    syncOracleTest
  } from "@/api/lock/tenantUser";
  import {
    listCell2
  } from "@/api/lock/cell";
  import {
    listUnit2
  } from "@/api/lock/unit";
  import {
    listFloor2
  } from "@/api/lock/floor";
  import {
    listHome2,
    getHomeListByUserIdruzhu
  } from "@/api/lock/home";
  import {
    listTenantkey,
    delTenantkey,
    updateTenantkey
  } from "@/api/lock/tenantkey";
  import ruzhu from "@/views/lock/tenantuser/ruzhu/index";
  import Home from "@/views/lock/tenantuser/home/index";
  import KeyAuth from "@/views/lock/tenantuser/keyAuth/index";
  import {
    formatOssUrl,
    formatOssUrlForStorage
  } from "@/utils/ossUtils";
  // 直接使用环境变量，不再通过配置文件

  // 定义一个独立的 formatDateTime 函数
  function formatDateTime(dateTimeStr) {
    // 创建一个 Date 对象
    const date = new Date(dateTimeStr);

    // 提取年、月、日、时、分、秒
    // 注意：月份是从 0 开始的，所以需要加 1
    const year = date.getFullYear();
    const month = ('0' + (date.getMonth() + 1)).slice(-2);
    const day = ('0' + date.getDate()).slice(-2);
    const hours = ('0' + date.getHours()).slice(-2);
    const minutes = ('0' + date.getMinutes()).slice(-2);
    const seconds = ('0' + date.getSeconds()).slice(-2);

    // 重新格式化日期时间字符串
    const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

    return formattedDateTime;
  }

  export default {
    name: "Tenant",
    dicts: ['sys_user_sex', 'ruzhu_status_type', 'freeze_status_type', 'key_type',
      'is_effectiveness', 'delete_flg_type','relation','ready_card'
    ],
    components: {
      ruzhu,
      Home,
      KeyAuth
    },
    props: {
      // 房间ID
      homeId: {
        type: [String, Number],
        default: null
      },
      // 控制搜索和工具栏的显示
      hideUI: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 人员信息表格数据
        tenantList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: null,
          phone: null,
          idCardNumber: null,
          type: null,
          isFlag: null,
          homeId: null,
          cellId: null,
          unitId: null,
          floorId: null
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          name: [{
            required: true,
            message: "姓名不能为空",
            trigger: "blur"
          }],
          cardNo: [{
            required: true,
            message: "卡号不能为空",
            trigger: "blur"
          }],
          type: [{
            required: true,
            message: "类别不能为空",
            trigger: "change"
          }],
          idCardNumber: [{
            required: true,
            message: "学工号不能为空",
            trigger: "blur"
          }],
          phone: [{
            required: true,
            message: "手机号不能为空",
            trigger: "blur"
          }],
          // idCardReverse: [
          //   { required: true, message: "学生反面照片不能为空", trigger: "change" }
          // ],
          // homeId: [
          //   { required: true, message: "房间不能为空", trigger: "change" }
          // ],
          // unitId: [
          //   { required: true, message: "楼栋不能为空", trigger: "change" }
          // ],
          // floorId: [
          //   { required: true, message: "楼层不能为空", trigger: "change" }
          // ],
          cellId: [{
            required: true,
            message: "校区不能为空",
            trigger: "change"
          }],
          gender: [{
            required: true,
            message: "用户性别不能为空",
            trigger: "change"
          }]
        },
        // 校区选项
        cellOptions: [],
        // 楼栋选项
        unitOptions: [],
        // 楼层选项
        floorOptions: [],
        // 房间选项
        homeOptions: [],
        // 办理状态弹窗
        statusDialog: false,
        // 当前选中的人员
        currentTenant: {},
        // 状态表单数据
        statusForm: {},

        // 授权钥匙相关数据
        isShow: false,
        radioType: '1',
        showCustom: false,
        showka: true,
        radio: null,
        // 钥匙表单参数
        keyForm: {
          cardNo: "",
        },
        // 添加密码、卡片校验
        rulesNEW: {
          startTime: [{
            required: true,
            message: '请选择开始时间',
            trigger: 'blur'
          }],
          endTime: [{
            required: true,
            message: '请选择结束时间',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
          cardNo: [{
            required: true,
            message: '请输入卡号',
            trigger: 'blur'
          }]
        },
        // 详情对话框相关数据
        detailOpen: false,
        activeTab: 'base',
        detailForm: {},

        // 密码修改相关数据
        passwordOpen: false,
        passwordForm: {},
        passwordRules: {
          password: [{
              required: true,
              message: "密码不能为空",
              trigger: "blur"
            },
            {
              min: 6,
              max: 6,
              message: "密码必须是6位",
              trigger: "blur"
            },
            {
              pattern: /^\d{6}$/,
              message: "密码必须是6位数字",
              trigger: "blur"
            }
          ]
        },

        // 钥匙授权相关数据
        keyAuthDialogVisible: false,
        currentKeyAuthUser: {},
        loading: false,
        // 组件销毁重建的key值
        keyAuthComponentKey: 0,

        // 退房进度相关数据
        checkoutProgressVisible: false,
        checkoutProgressData: {},
        checkoutWebSocket: null,
        checkoutProgress: {
          current: 0,
          total: 0,
          status: 'processing', // processing, success, error
          message: '',
          details: []
        },


      };
    },
    computed: {
      endPickerOptions() {
        return {
          disabledDate: time => {
            const startTime = new Date(this.keyForm.startTime).setHours(0, 0, 0, 0); // 设置开始时间的时、分、秒、毫秒为0
            const currentDate = new Date().setHours(0, 0, 0, 0); // 当前日期的时、分、秒、毫秒为0

            // 禁止选择开始时间之前的日期或当天
            return time.getTime() < startTime - 86400000 || time.getTime() < currentDate;
          }
        };
      },
      defaultTime() {
        return '00:00:00'; // 指定的默认时分秒
      },
      // 是否为嵌入模式
      isEmbedded() {
        return this.hideUI === true;
      },

    },
    watch: {
      // 监听homeId的变化，重新加载数据
      homeId: {
        handler(newVal) {
          if (newVal) {

            this.queryParams.homeId = newVal;
            this.queryParams.isFlag = 1;
            this.getList();
          }
        },
        immediate: true
      }
    },
    created() {
      // 先加载校区数据
      this.getCellList().then(() => {
        // 如果有homeId参数，则添加到查询条件中
        if (this.homeId) {
          this.queryParams.homeId = this.homeId;
        }
        this.getList();
      });
    },
    mounted() {
      // 如果是嵌入模式，添加样式类
      if (this.isEmbedded) {
        this.$nextTick(() => {
          const container = this.$el.querySelector('.app-container');
          if (container) {
            container.classList.add('embedded-mode');
          }
        });
      }
    },

    beforeDestroy() {
      // 组件销毁前关闭WebSocket连接
      if (this.checkoutWebSocket) {
        this.checkoutWebSocket.close();
        this.checkoutWebSocket = null;
      }
    },
    methods: {
      /** 查询人员信息列表 */
      getList() {
        this.loading = true;
        // 确保每次查询都用上最新的homeId
        if (this.homeId) {
          this.queryParams.homeId = this.homeId;
        }
        listTenant(this.queryParams).then(response => {
          this.tenantList = response.rows;
          // 不再需要手动处理位置信息，因为后台会直接返回
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          name: null,
          phone: null,
          type: null,
          idCardPositive: null,
          idCardReverse: null,
          idCardNumber: null,
          startTime: null,
          endTime: null,
          homeId: null,
          unitId: null,
          floorId: null,
          cellId: null,
          isFlag: null,
          gender: null,
          createBy: null,
          updateBy: null,
          updateTime: null,
          createTime: null,
          remark: null,
          userId: null,
          flgDelete: null
        };
        this.resetForm("form");
        // 清空选项数据
        this.unitOptions = [];
        this.floorOptions = [];
        this.homeOptions = [];
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        // 确保入住状态参数正确传递
        if (this.queryParams.isFlag === '') {
          this.queryParams.isFlag = null;
        }
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        // 重置所有查询参数
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          name: null,
          phone: null,
          idCardNumber: null,
          type: null,
          isFlag: null,
          homeId: null,
          cellId: null,
          unitId: null,
          floorId: null
        };
        this.handleQuery();
        // 清空选项数据
        this.unitOptions = [];
        this.floorOptions = [];
        this.homeOptions = [];
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        // 设置默认值为未入住 (0)
        this.form.isFlag = 0;
        // 如果有传入的 homeId，设置到表单中
        if (this.homeId) {
          this.form.homeId = this.homeId;
        }
        // 如果有校区选项，默认选中第一个
        if (this.cellOptions && this.cellOptions.length > 0) {
          this.form.cellId = this.cellOptions[0].id;
        }
        this.open = true;
        this.title = "添加人员信息";
      },
      /** 修改按钮操作 */
      async handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids;
        try {
          // 先获取人员数据
          const response = await getTenant(id);
          const data = response.data;

          // 如果有校区ID，先加载校区数据
          if (data.cellId) {
            await this.getCellList();
            // 加载楼栋数据
            await this.getUnitList(data.cellId);

            // 如果有楼栋ID，加载楼层数据
            if (data.unitId) {
              await this.getFloorList(data.unitId);

              // 如果有楼层ID，加载房间数据
              if (data.floorId) {
                await this.getRoomList(data.floorId);
              }
            }
          }

          // 转换办理状态为数字类型
          if (data.isFlag !== null && data.isFlag !== undefined) {
            data.isFlag = parseInt(data.isFlag);
          }

          // 所有数据加载完成后，再设置表单数据
          this.form = data;
          // 如果有传入的 homeId，覆盖表单中的 homeId
          if (this.homeId) {
            this.form.homeId = this.homeId;
          }
          this.open = true;
          this.title = "修改人员信息";
        } catch (error) {
          console.error('加载数据失败:', error);
        }
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateTenant(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addTenant(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除人员信息编号为"' + ids + '"的数据项？').then(function() {
          return delTenant(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('tenantuser/tenant/export', {
          ...this.queryParams
        }, `tenant_${new Date().getTime()}.xlsx`)
      },
      /** 获取校区列表 */
      getCellList() {
        return listCell2().then(response => {
          this.cellOptions = response.rows;
        });
      },
      /** 获取楼栋列表 */
      getUnitList(cellId) {
        if (!cellId) {
          this.unitOptions = [];
          return Promise.resolve();
        }

        return listUnit2({
          cellId: cellId
        }).then(response => {
          this.unitOptions = response.rows || [];
        });
      },
      /** 获取楼层列表 */
      getFloorList(unitId) {
        if (!unitId) {
          this.floorOptions = [];
          return Promise.resolve();
        }

        return listFloor2({
          unitId: unitId
        }).then(response => {
          this.floorOptions = response.rows || [];
        });
      },
      /** 获取房间列表 */
      getRoomList(floorId) {
        if (!floorId) {
          this.homeOptions = [];
          return Promise.resolve();
        }

        return listHome2({
          floorId: floorId
        }).then(response => {
          this.homeOptions = response.rows || [];
        });
      },
      /** 表单校区选择改变时触发 */
      handleCellChange(value) {
        if (!value) {
          this.form.unitId = undefined;
          this.form.floorId = undefined;
          this.form.homeId = undefined;
          this.unitOptions = [];
          this.floorOptions = [];
          this.homeOptions = [];
          return;
        }
        this.getUnitList(value);
      },
      /** 表单楼栋选择改变时触发 */
      handleUnitChange(value) {
        if (!value) {
          this.form.floorId = undefined;
          this.form.homeId = undefined;
          this.floorOptions = [];
          this.homeOptions = [];
          return;
        }
        this.getFloorList(value);
      },
      /** 表单楼层选择改变时触发 */
      handleFloorChange(value) {
        if (!value) {
          this.form.homeId = undefined;
          this.homeOptions = [];
          return;
        }
        this.getRoomList(value);
      },
      /** 搜索条件校区选择改变时触发 */
      handleQueryCellChange(value) {
        if (!value) {
          this.queryParams.unitId = undefined;
          this.queryParams.floorId = undefined;
          this.queryParams.homeId = undefined;
          this.unitOptions = [];
          this.floorOptions = [];
          this.homeOptions = [];
          return;
        }
        this.getUnitList(value);
      },
      /** 搜索条件楼栋选择改变时触发 */
      handleQueryUnitChange(value) {
        if (!value) {
          this.queryParams.floorId = undefined;
          this.queryParams.homeId = undefined;
          this.floorOptions = [];
          this.homeOptions = [];
          return;
        }
        this.getFloorList(value);
      },
      /** 搜索条件楼层选择改变时触发 */
      handleQueryFloorChange(value) {
        if (!value) {
          this.queryParams.homeId = undefined;
          this.homeOptions = [];
          return;
        }
        this.getRoomList(value);
      },
      /** 将楼层数字转换为名称 */
      getFloorName(floor) {
        const floorNum = parseInt(floor);
        if (isNaN(floorNum)) return floor;

        if (floorNum < 0) {
          return `地下${Math.abs(floorNum)}层`;
        } else {
          return `${floorNum}层`;
        }
      },
      /** 办理状态按钮操作 */
      handleStatus(row) {
        this.currentTenant = JSON.parse(JSON.stringify(row));
        this.statusForm = {
          id: row.id,
          isFlag: row.isFlag || 0
        };
        this.statusDialog = true;
      },
      /** 提交状态表单 */
      submitStatusForm() {
        // 如果是退租状态，显示确认对话框
        if (this.statusForm.isFlag === 0 || this.statusForm.isFlag === 2) {
          this.$confirm('确认要将该人员状态修改为退租吗？此操作将删除该人员下的所有密码和授权', '退租确认', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.updateTenantStatus();
          }).catch(() => {
            // 用户取消操作，不做任何处理
          });
        } else {
          // 非退租状态，直接更新
          this.updateTenantStatus();
        }
      },
      /** 更新人员状态 */
      updateTenantStatus() {
        const tenant = {
          id: this.statusForm.id,
          isFlag: this.statusForm.isFlag
        };

        // 使用包含钥匙删除逻辑的接口，所有状态都使用同一接口
        updateTenantStatus(tenant).then(response => {
          if (this.statusForm.isFlag === 0 || this.statusForm.isFlag === 2) {
            this.$modal.msgSuccess("状态修改成功，相关钥匙已被删除");
          } else {
            this.$modal.msgSuccess("状态修改成功");
          }
          this.statusDialog = false;
          this.getList();
        });
      },
      /** 处理详情按钮操作 */
      // handleDetail(row) {
      //   // 获取完整的人员信息
      //   getTenant(row.id).then(async response => {
      //     this.detailForm = response.data;

      //     // 处理学生照片URL，使用全局工具类
      //     if (this.detailForm.idCardPositive) {
      //       this.detailForm.idCardPositive = formatOssUrl(this.detailForm.idCardPositive);
      //     }

      //     if (this.detailForm.idCardReverse) {
      //       this.detailForm.idCardReverse = formatOssUrl(this.detailForm.idCardReverse);
      //     }

      //     // 确保位置信息字段存在，即使为空也要定义
      //     this.detailForm.cellName = this.detailForm.cellName || '';
      //     this.detailForm.unitName = this.detailForm.unitName || '';
      //     this.detailForm.floorName = this.detailForm.floorName || '';
      //     this.detailForm.roomName = this.detailForm.roomName || '';

      //     // 确保房间信息数组存在
      //     this.detailForm.abuildHomes = this.detailForm.abuildHomes || [];

      //     // 加载位置信息名称（如果缺失）
      //     await this.loadLocationNames();

      //     this.activeTab = 'base';
      //     this.detailOpen = true;

      //   });
      // },
      /** 加载位置信息名称 */
      async loadLocationNames() {
        // 如果校区名称缺失但有校区ID
        if (this.detailForm.cellId && !this.detailForm.cellName) {
          // 确保校区选项已加载
          if (this.cellOptions.length === 0) {
            await this.getCellList();
          }

          const cell = this.cellOptions.find(item => item.id === this.detailForm.cellId);
          if (cell) {
            this.detailForm.cellName = cell.name;
          }
        }

        // 如果楼栋名称缺失但有楼栋ID
        if (this.detailForm.unitId && !this.detailForm.unitName) {
          // 加载楼栋选项
          await this.getUnitList(this.detailForm.cellId);
          const unit = this.unitOptions.find(item => item.id === this.detailForm.unitId);
          if (unit) {
            this.detailForm.unitName = unit.name;
          }
        }

        // 如果楼层名称缺失但有楼层ID
        if (this.detailForm.floorId && !this.detailForm.floorName) {
          // 加载楼层选项
          await this.getFloorList(this.detailForm.unitId);
          const floor = this.floorOptions.find(item => item.id === this.detailForm.floorId);
          if (floor) {
            this.detailForm.floorName = floor.floorName;
          }
        }

        // 如果房间名称缺失但有房间ID
        if (this.detailForm.homeId && !this.detailForm.roomName) {
          // 加载房间选项
          await this.getRoomList(this.detailForm.floorId);
          const room = this.homeOptions.find(item => item.id === this.detailForm.homeId);
          if (room) {
            this.detailForm.roomName = room.roomName;
          }
        }
      },
      /** 授权钥匙按钮操作 */
      handleRuzhu(row) {

        this.$refs.ruzhu.showDialog({
          id: row.id,
          homeId: row.homeId,
          cellId: row.cellId,
          unitId: row.unitId,
          floorId: row.floorId,
          phone: row.phone,
          idCardNumber: row.idCardNumber,
          name: row.name,
          type: "1" // 默认为密码类型
        });
      },
      /** 办理钥匙按钮操作 */
      handleKeyAuth(row) {
        this.currentKeyAuthUser = row;
        // 更新组件key值，确保每次打开都重新创建组件
        this.keyAuthComponentKey++;
        this.keyAuthDialogVisible = true;
        this.loadUserRoomInfo(row);
      },
      /** 监听标签页切换 */
      handleTabChange(tab) {
        if (tab.name === 'keys' && this.currentTenantForKey) {
          this.loadKeyList();
        }
      },
      /** 加载钥匙列表 */
      loadKeyList() {
        if (!this.currentTenantForKey) return;

        this.loading = true;
        listTenantkey({
          idCardNumber: this.currentTenantForKey.idCardNumber,
          homeId: this.currentTenantForKey.homeId
        }).then(response => {
          this.keyList = response.rows || [];
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      },
      /** 新增钥匙 */
      handleAddKey() {
        if (!this.currentTenantForKey) return;

        this.$refs.ruzhu.showDialog({
          id: this.currentTenantForKey.id,
          homeId: this.currentTenantForKey.homeId,
          cellId: this.currentTenantForKey.cellId,
          unitId: this.currentTenantForKey.unitId,
          floorId: this.currentTenantForKey.floorId,
          idCardNumber: this.currentTenantForKey.idCardNumber,
          phone: this.currentTenantForKey.phone,
          name: this.currentTenantForKey.name,
          type: "1" // 默认为密码类型
        });

        // 添加事件监听，当钥匙授权完成后刷新钥匙列表
        this.$refs.ruzhu.$once('refresh', () => {
          this.loadKeyList();
        });
      },
      /** 编辑钥匙 */
      handleEditKey(row) {
        if (!this.currentTenantForKey) return;

        this.$refs.ruzhu.showDialog({
          keyId: row.id, // 传递钥匙ID，表示是编辑操作
          id: this.currentTenantForKey.id,
          homeId: row.homeId,
          cellId: row.cellId,
          unitId: row.unitId,
          floorId: row.floorId,
          idCardNumber: row.idCardNumber,
          name: this.currentTenantForKey.name,
          type: row.type,
          password: row.password,
          startTime: row.startTime,
          endTime: row.endTime
        });

        // 添加事件监听，当钥匙编辑完成后刷新钥匙列表
        this.$refs.ruzhu.$once('refresh', () => {
          this.loadKeyList();
        });
      },
      /** 删除钥匙 */
      handleDeleteKey(row) {
        this.$modal.confirm('是否确认删除该钥匙？').then(() => {
          delTenantkey(row.id).then(() => {
            this.$modal.msgSuccess("删除成功");
            this.loadKeyList();
          });
        }).catch(() => {});
      },
      /** 修改密码按钮操作 */
      handlePasswordUpdate(row) {
        this.passwordForm = {
          id: row.id,
          password: row.password || ''
        };
        this.passwordOpen = true;
      },
      /** 提交密码修改 */
      submitPasswordForm() {
        this.$refs["passwordForm"].validate(valid => {
          if (valid) {
            const updateData = {
              id: this.passwordForm.id,
              password: this.passwordForm.password,
              operationType: "password"
            };
            updateTenantkey(updateData).then(response => {
              this.$modal.msgSuccess("密码修改成功");
              this.passwordOpen = false;
              this.loadKeyList();
            });
          }
        });
      },
      /** 取消密码修改 */
      cancelPassword() {
        this.passwordOpen = false;
        this.passwordForm = {};
      },

      /** 加载用户房间信息 */
      async loadUserRoomInfo(row) {
        try {
          const response = await getTenant(row.id);
          const data = response.data;

          // 如果有校区ID，先加载校区数据
          if (data.cellId) {
            await this.getCellList();
            // 加载楼栋数据
            await this.getUnitList(data.cellId);

            // 如果有楼栋ID，加载楼层数据
            if (data.unitId) {
              await this.getFloorList(data.unitId);

              // 如果有楼层ID，加载房间数据
              if (data.floorId) {
                await this.getRoomList(data.floorId);
              }
            }
          }

          // 转换办理状态为数字类型
          if (data.isFlag !== null && data.isFlag !== undefined) {
            data.isFlag = parseInt(data.isFlag);
          }

          // 所有数据加载完成后，再设置表单数据
          this.detailForm = data;
          // 如果有传入的 homeId，覆盖表单中的 homeId
          if (this.homeId) {
            this.detailForm.homeId = this.homeId;
          }
          return data;
        } catch (error) {
          console.error('加载用户房间信息失败:', error);
          throw error;
        }
      },

      /** 刷新房间数据 */
      refreshRoomData() {
        this.loadUserRoomInfo(this.currentKeyAuthUser);
        this.$message.success('房间数据已刷新');
      },

      /** 处理添加房间 */
      handleAddRoom() {
        this.$message.info('添加房间功能开发中...');
      },

      /** 处理显示钥匙授权对话框 */
      handleShowKeyAuth(userInfo) {
        console.log('handleShowKeyAuth called, userInfo:', userInfo);
        // 先设置loading状态
        this.loading = true;
        console.log('Loading set to true:', this.loading);

        // 更新组件key值，确保每次打开都重新创建组件
        this.keyAuthComponentKey++;

        // 先显示抽屉
        this.keyAuthDialogVisible = true;

        // 调用keyAuth组件的showDialog方法
        this.$refs.keyAuth.showDialog(userInfo);

        // 加载用户房间信息
        this.loadUserRoomInfo(userInfo).then(() => {
          console.log('loadUserRoomInfo completed, setting loading to false');
          this.loading = false;
        }).catch(() => {
          console.log('loadUserRoomInfo failed, setting loading to false');
          this.loading = false;
        });
      },
      /** 处理显示钥匙授权对话框 */
      handleShowKeyAuthDialog(userInfo) {
        console.log('handleShowKeyAuthDialog called, userInfo:', userInfo);

        // 更新组件key值，确保每次打开都重新创建组件
        this.keyAuthComponentKey++;

        // 先显示抽屉
        this.keyAuthDialogVisible = true;
        // 设置loading状态
        this.loading = true;

        // 调用keyAuth组件的showDialog方法
        this.$refs.keyAuth.showDialog(userInfo);

        // 加载用户房间信息
        this.loadUserRoomInfo(userInfo).then(() => {
          console.log('loadUserRoomInfo completed, setting loading to false');
          this.loading = false;
        }).catch(() => {
          console.log('loadUserRoomInfo failed, setting loading to false');
          this.loading = false;
        });
      },

      /** 退房按钮操作 */
      handleCheckOut(row) {
        this.$confirm(
          `<div style="text-align: left;">
            <p><strong>确认要为用户 "${row.name}" 办理退房吗？</strong></p>
            <p style="color: #f56c6c; margin: 10px 0;">
              <i class="el-icon-warning"></i>
              <strong>重要提示：</strong>
            </p>
            <ul style="color: #f56c6c; margin: 10px 0; padding-left: 20px;">
              <li>退房将删除该用户所有房间下的卡片和密码授权</li>
              <li>此操作不可逆，请谨慎操作</li>
              <li>如果房间不存在，系统会自动清理脏数据</li>
            </ul>
          </div>`,
          '退房确认', {
            confirmButtonText: '确定退房',
            cancelButtonText: '取消',
            type: 'warning',
            dangerouslyUseHTMLString: true,
            customClass: 'checkout-confirm-dialog'
          }
        ).then(() => {
          this.processCheckOut(row);
        }).catch(() => {
          // 用户取消操作
        });
      },

      /** 执行退房操作 */
      async processCheckOut(row) {
        try {
          // 先显示退房进度对话框
          this.showCheckoutProgressDialog(row);

          // 先连接WebSocket，确保连接成功后再调用退房接口
          const socketId = `${row.id}_checkout`;
          await this.connectCheckoutWebSocket(socketId, row);

          // WebSocket连接成功后，再调用退房接口
          const response = await apartmentRoomCheckOut({
            userId: row.id
          });

          // 接口调用成功后，等待WebSocket推送结果
          console.log('退房接口调用成功，等待WebSocket推送结果...');

        } catch (error) {
          console.error('退房操作失败:', error);
          this.$modal.msgError('退房操作失败，请稍后重试');
          // 关闭进度对话框
          this.checkoutProgressVisible = false;
        }
      },

      /** 显示退房结果详情 */
      showCheckOutResult(data, type) {
        if (!data) return;

        let title = '';
        let content = '';

        if (type === 'success') {
          title = '退房成功';
          content = `
            <div style="text-align: left;">
              <p><strong>退房结果：</strong></p>
              <ul>
                <li>总房间数：${data.totalRooms}</li>
                <li>成功退房：${data.successCount}</li>
                <li>清理脏数据：${data.cleanedCount}</li>
                <li>失败数量：${data.failedCount}</li>
              </ul>
          `;
        } else if (type === 'partial') {
          title = '部分退房成功';
          content = `
            <div style="text-align: left;">
              <p><strong>退房结果：</strong></p>
              <ul>
                <li>总房间数：${data.totalRooms}</li>
                <li>成功退房：${data.successCount}</li>
                <li>清理脏数据：${data.cleanedCount}</li>
                <li>失败数量：${data.failedCount}</li>
              </ul>
              ${data.failedRooms && data.failedRooms.length > 0 ? `
                <p style="color: #f56c6c; margin-top: 10px;"><strong>失败房间：</strong></p>
                <ul style="color: #f56c6c;">
                  ${data.failedRooms.map(room => `<li>${room.roomName || room.roomId} - ${room.errorReason}</li>`).join('')}
                </ul>
              ` : ''}
          `;
        } else {
          title = '退房失败';
          content = `
            <div style="text-align: left;">
              <p style="color: #f56c6c;"><strong>退房失败详情：</strong></p>
              ${data.failedRooms && data.failedRooms.length > 0 ? `
                <ul style="color: #f56c6c;">
                  ${data.failedRooms.map(room => `<li>${room.roomName || room.roomId} - ${room.errorReason}</li>`).join('')}
                </ul>
              ` : '未知错误'}
          `;
        }

        this.$alert(content, title, {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '确定',
          customClass: 'checkout-result-dialog'
        });
      },

      /** 处理Oracle同步命令 */
      handleSyncCommand(command) {
        if (command === 'all') {
          this.handleSyncOracleAll();
        } else if (command === 'current') {
          this.handleSyncOracleCurrent();
        } else if (command === 'test') {
          this.handleSyncOracleTest();
        }
      },

      /** Oracle全量同步 */
      handleSyncOracleAll() {
        this.$modal.confirm('确认要执行Oracle全量数据同步吗？此操作可能需要较长时间，请耐心等待。').then(() => {
          this.loading = true;
          syncOracleAll().then(response => {
            // 使用更醒目的成功提示
            this.$notify({
              title: '全量同步已完成',
              message: 'Oracle全量数据同步执行成功，稍后数据会自动更新',
              type: 'success',
              duration: 8000,
              position: 'top-right',
              showClose: true
            });

            // 同时在页面顶部显示横幅提示
            this.$message({
              message: '✅ 全量同步执行成功，稍后数据会自动更新',
              type: 'success',
              duration: 8000,
              showClose: true
            });

            this.getList();
          }).catch(error => {
            console.error('Oracle全量同步失败:', error);
            this.$modal.msgError("Oracle全量数据同步执行失败");
          }).finally(() => {
            this.loading = false;
          });
        });
      },

      /** Oracle增量同步 */
      handleSyncOracleCurrent() {
        this.$modal.confirm('确认要执行Oracle增量数据同步吗？').then(() => {
          try {
            syncOracleCurrent().then(response => {
              if (response.code === 200) {
                // 使用更醒目的成功提示
                this.$notify({
                  title: '增量同步已启动',
                  message: 'Oracle增量数据同步正在后台执行中，稍后数据会自动更新',
                  type: 'success',
                  duration: 8000,
                  position: 'top-right',
                  showClose: true
                });

                // 同时在页面顶部显示横幅提示
                this.$message({
                  message: '🔄 增量同步已开始执行，稍后数据会自动更新',
                  type: 'success',
                  duration: 8000,
                  showClose: true
                });
              } else {
                this.$modal.msgError(response.msg || '增量同步失败');
              }
            }).catch(error => {
              console.error('Oracle增量同步失败:', error);
              this.$modal.msgError('增量同步失败，请稍后重试');
            });
          } catch (error) {
            // 用户取消操作
          }
        });
      },

      /** Oracle测试同步 */
      handleSyncOracleTest() {
        this.$modal.confirm('确认要执行Oracle测试数据同步吗？此操作会使用模拟数据进行测试。').then(() => {
          this.loading = true;
          syncOracleTest().then(response => {
            this.$modal.msgSuccess("Oracle测试数据同步执行成功");
            this.getList();
          }).catch(error => {
            console.error('Oracle测试同步失败:', error);
            this.$modal.msgError("Oracle测试数据同步执行失败");
          }).finally(() => {
            this.loading = false;
          });
        });
      },

      /** 连接退房结果WebSocket */
      connectCheckoutWebSocket(socketId, userData) {
        return new Promise((resolve, reject) => {
          try {
            // 关闭之前的连接
            if (this.checkoutWebSocket) {
              this.checkoutWebSocket.close();
            }

            // 构建WebSocket URL，从环境变量读取
            const wsBaseUrl = process.env.VUE_APP_WS_URL || 'ws://localhost:8082';
            const wsUrl = `${wsBaseUrl}/websocket/${socketId}`;
            console.log('WebSocket连接信息:', {
              socketId: socketId,
              wsBaseUrl: wsBaseUrl,
              wsUrl: wsUrl,
              currentLocation: window.location.href,
              nodeEnv: process.env.NODE_ENV,
              envVar: process.env.VUE_APP_WS_URL,
              note: '从环境变量读取WebSocket地址'
            });

            this.checkoutWebSocket = new WebSocket(wsUrl);

            // 设置连接超时
            const connectionTimeout = setTimeout(() => {
              reject(new Error('WebSocket连接超时'));
            }, 5000); // 5秒超时

            this.checkoutWebSocket.onopen = (event) => {
              console.log('退房结果WebSocket连接成功:', socketId);
              console.log('WebSocket连接状态:', {
                readyState: this.checkoutWebSocket.readyState,
                url: this.checkoutWebSocket.url,
                socketId: socketId
              });
              clearTimeout(connectionTimeout);
              resolve(); // 连接成功，resolve Promise
            };

            this.checkoutWebSocket.onmessage = (event) => {
              console.log('收到WebSocket消息:', {
                data: event.data,
                type: typeof event.data,
                timestamp: new Date().toISOString()
              });

              try {
                // 检查消息是否为JSON格式
                if (event.data && typeof event.data === 'string') {
                  // 尝试解析JSON
                  if (event.data.trim().startsWith('{') || event.data.trim().startsWith('[')) {
                    const data = JSON.parse(event.data);
                    console.log('解析JSON成功:', data);
                    this.handleCheckoutResultMessage(data);
                  } else {
                    // 处理非JSON格式的消息（如"连接成功"）
                    console.log('收到非JSON格式消息:', event.data);
                    if (event.data === '连接成功') {
                      console.log('WebSocket连接已建立，等待退房结果...');
                    }
                  }
                }
              } catch (error) {
                console.error('解析WebSocket消息失败:', error);
              }
            };

            this.checkoutWebSocket.onclose = (event) => {
              console.log('退房结果WebSocket连接关闭:', socketId);
            };

            this.checkoutWebSocket.onerror = (error) => {
              console.error('退房结果WebSocket连接错误:', error);
              clearTimeout(connectionTimeout);
              this.checkoutProgress.status = 'error';
              this.checkoutProgress.message = 'WebSocket连接失败';
              reject(new Error('WebSocket连接失败')); // 连接失败，reject Promise
            };
          } catch (error) {
            console.error('创建WebSocket连接失败:', error);
            reject(error);
          }
        });
      },

      /** 处理退房结果消息 */
      handleCheckoutResultMessage(data) {
        console.log('收到退房结果消息:', data);

        switch (data.type) {
          case 'checkout_progress':
            // 处理单个房间的退房进度
            this.checkoutProgress.current = data.current;
            this.checkoutProgress.total = data.total;
            this.checkoutProgress.status = 'processing';
            this.checkoutProgress.message = data.message;

            // 只添加退房失败的房间到详情列表
            if (data.data && data.data.message && data.data.message.includes('失败')) {
              const roomResult = {
                ...data.data,
                status: 'error',
                time: new Date().toLocaleTimeString()
              };
              this.checkoutProgress.details.push(roomResult);
            }
            break;

          case 'checkout_complete':
            // 退房完成
            this.checkoutProgress.status = 'success';
            this.checkoutProgress.current = data.total;
            this.checkoutProgress.message = data.message;

            // 显示详细结果
            if (data.data) {
              this.showCheckoutResultDetails(data.data);
            }

            // 关闭WebSocket连接
            if (this.checkoutWebSocket) {
              this.checkoutWebSocket.close();
              this.checkoutWebSocket = null;
            }

            // 刷新列表
            this.getList();
            break;

          case 'checkout_error':
            // 退房出错
            this.checkoutProgress.status = 'error';
            this.checkoutProgress.message = data.message;

            // 关闭WebSocket连接
            if (this.checkoutWebSocket) {
              this.checkoutWebSocket.close();
              this.checkoutWebSocket = null;
            }
            break;

          default:
            console.log('未知消息类型:', data.type);
        }
      },

      /** 显示退房进度对话框 */
      showCheckoutProgressDialog(userData) {
        // 设置用户信息
        this.checkoutProgressData = {
          name: userData.name,
          idCardNumber: userData.idCardNumber
        };

        // 重置进度状态
        this.checkoutProgress = {
          current: 0,
          total: 0,
          status: 'processing',
          message: '正在处理退房请求...',
          details: []
        };

        // 显示对话框
        this.checkoutProgressVisible = true;
      },

      /** 显示退房结果详情 */
      showCheckoutResultDetails(data) {
        // 这里可以显示详细的退房结果，比如成功和失败的房间列表
        console.log('退房结果详情:', data);
      },

      /** 获取进度状态类型 */
      getProgressStatusType() {
        switch (this.checkoutProgress.status) {
          case 'success':
            return 'success';
          case 'error':
            return 'danger';
          default:
            return 'warning';
        }
      },

      /** 获取进度状态文本 */
      getProgressStatusText() {
        switch (this.checkoutProgress.status) {
          case 'success':
            return '完成';
          case 'error':
            return '错误';
          default:
            return '处理中';
        }
      },

      /** 获取详细状态类型 */
      getDetailStatusType(status) {
        switch (status) {
          case 'success':
            return 'success';
          case 'error':
            return 'danger';
          case 'processing':
            return 'warning';
          default:
            return 'info';
        }
      },

      /** 获取详细状态文本 */
      getDetailStatusText(status) {
        switch (status) {
          case 'success':
            return '成功';
          case 'error':
            return '失败';
          case 'processing':
            return '处理中';
          default:
            return '未知';
        }
      },

      // 删除重复的方法定义，保留第1665行附近的方法

      /** 显示退房进度对话框 */
      showCheckoutProgressDialog(userData) {
        // 设置用户信息
        this.checkoutProgressData = {
          name: userData.name,
          idCardNumber: userData.idCardNumber
        };

        // 重置进度状态
        this.checkoutProgress = {
          current: 0,
          total: 0,
          status: 'processing',
          message: '正在初始化退房流程...',
          details: []
        };

        // 显示对话框
        this.checkoutProgressVisible = true;
      },

      /** 获取进度状态类型 */
      getProgressStatusType() {
        switch (this.checkoutProgress.status) {
          case 'success':
            return 'success';
          case 'error':
            return 'danger';
          default:
            return 'warning';
        }
      },

      /** 获取进度状态文本 */
      getProgressStatusText() {
        switch (this.checkoutProgress.status) {
          case 'success':
            return '完成';
          case 'error':
            return '错误';
          default:
            return '处理中';
        }
      },

      /** 获取详细状态类型 */
      getDetailStatusType(status) {
        switch (status) {
          case 'success':
            return 'success';
          case 'error':
            return 'danger';
          case 'processing':
            return 'warning';
          default:
            return 'info';
        }
      },

      /** 获取详细状态文本 */
      getDetailStatusText(status) {
        switch (status) {
          case 'success':
            return '成功';
          case 'error':
            return '失败';
          case 'processing':
            return '处理中';
          default:
            return '未知';
        }
      },

      // 一键复制所有退房失败信息
      copyAllCheckoutFailureInfo() {
        if (this.checkoutProgress.details.length === 0) {
          this.$message.warning('没有失败信息可复制');
          return;
        }

        // 构建复制内容
        let copyText = `退房失败信息汇总\n`;
        copyText += `时间: ${new Date().toLocaleString()}\n`;
        copyText += `用户: ${this.checkoutProgressData.name || '未知'}\n`;
        copyText += `学工号: ${this.checkoutProgressData.idCardNumber || '未知'}\n`;
        copyText += `总房间数: ${this.checkoutProgress.total}\n`;
        copyText += `失败房间数: ${this.checkoutProgress.details.length}\n\n`;
        copyText += `失败详情:\n`;
        copyText += `序号\t校区\t楼栋\t楼层\t房间\t状态\t失败原因\t时间\n`;
        copyText += `─\t─\t─\t─\t─\t─\t─\t─\n`;

        this.checkoutProgress.details.forEach((detail, index) => {
          copyText += `${index + 1}\t${detail.cellName || '-'}\t${detail.unitName || '-'}\t${detail.floorName || '-'}\t${detail.roomName || '-'}\t${detail.status || '失败'}\t${detail.errorReason || '未知错误'}\t${detail.time || '-'}\n`;
        });

        // 复制到剪贴板
        this.copyToClipboard(copyText);
      },

      // 复制文本到剪贴板
      copyToClipboard(text) {
        if (navigator.clipboard && window.isSecureContext) {
          // 使用现代 Clipboard API
          navigator.clipboard.writeText(text).then(() => {
            this.$message.success('失败信息已复制到剪贴板');
          }).catch(err => {
            console.error('复制失败:', err);
            this.fallbackCopyToClipboard(text);
          });
        } else {
          // 降级方案
          this.fallbackCopyToClipboard(text);
        }
      },

      // 降级复制方案
      fallbackCopyToClipboard(text) {
        const textArea = document.createElement('textarea');
        textArea.value = text;
        textArea.style.position = 'fixed';
        textArea.style.left = '-999999px';
        textArea.style.top = '-999999px';
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();

        try {
          const successful = document.execCommand('copy');
          if (successful) {
            this.$message.success('失败信息已复制到剪贴板');
          } else {
            this.$message.error('复制失败，请手动复制');
            console.log('复制内容:', text);
          }
        } catch (err) {
          console.error('复制失败:', err);
          this.$message.error('复制失败，请手动复制');
          console.log('复制内容:', text);
        }

        document.body.removeChild(textArea);
      },

      // 全量同步
      async handleSyncOracle(command) {
        if (command === 'all') {
          try {
            this.$modal.confirm('确认执行全量同步吗？此操作可能需要较长时间，建议在业务低峰期执行。', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(async () => {
              try {
                const response = await syncOracleAll();
                if (response.code === 200) {
                  this.$modal.msgSuccess(response.msg);
                  // 可以添加一个状态提示
                  this.$message({
                    message: '全量同步已开始执行，请稍后查看同步结果',
                    type: 'info',
                    duration: 5000
                  });
                } else {
                  this.$modal.msgError(response.msg || '同步失败');
                }
              } catch (error) {
                console.error('同步失败:', error);
                this.$modal.msgError('同步失败，请稍后重试');
              }
            });
          } catch (error) {
            // 用户取消操作
          }
        }
      },

    }
  };
</script>

<style lang="scss">
  .el-dialog__title {
    color: #303133;
    font-weight: 500;
    font-size: 16px;
  }

  .mt20 {
    margin-top: 20px;
  }

  .id-card-box {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    height: 320px;
    display: flex;
    flex-direction: column;

    &:hover {
      box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.1);
    }

    h4 {
      margin-top: 0;
      margin-bottom: 15px;
      color: #303133;
      font-weight: 500;
    }

    .el-image {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;

      img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }
    }
  }

  .image-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 150px;
    color: #f56c6c;
    font-size: 14px;
    background-color: #fef0f0;
    border-radius: 4px;

    i {
      font-size: 30px;
      margin-bottom: 10px;
    }
  }

  .image-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 150px;
    color: #409eff;
    font-size: 14px;
    background-color: #f5f7fa;
    border-radius: 4px;

    i {
      font-size: 30px;
      margin-bottom: 10px;
    }
  }

  .location-info {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;

    .location-item {
      position: relative;
      padding-right: 15px;

      &:not(:last-child)::after {
        content: '>';
        position: absolute;
        right: 0;
        color: #909399;
      }
    }
  }

  .contract-attachments-simple {
    padding: 10px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ebeef5;

    .attachment-title {
      font-weight: 500;
      margin-bottom: 10px;
    }

    .attachment-list {
      list-style: none;
      padding: 0;
      margin: 0;

      li {
        margin-bottom: 5px;

        .download-link {
          color: #409eff;
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }

  .text-danger {
    color: #f56c6c;
    font-weight: bold;
  }

  .text-warning {
    color: #e6a23c;
    font-weight: bold;
  }

  .text-success {
    color: #67c23a;
  }

  .remaining-days-item {
    .el-descriptions-item__content {
      display: flex;
      align-items: center;

      span {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;

        &.text-danger {
          background-color: #fef0f0;
        }

        &.text-warning {
          background-color: #fdf6ec;
        }

        &.text-success {
          background-color: #f0f9eb;
        }
      }
    }
  }

  /* 嵌入模式样式优化 */
  .app-container {
    &.embedded-mode {
      padding: 0;
      margin: 0;

      .el-table {
        margin-bottom: 0;
      }

      .el-pagination {
        margin-top: 10px;
        justify-content: center;
      }
    }
  }

  .key-management {
    .key-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;

      h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 500;
      }
    }
  }

  .warning-tip {
    margin-top: 10px;
    padding: 8px 10px;
    background-color: #fef0f0;
    border-radius: 4px;
    color: #f56c6c;
    font-size: 13px;
    display: flex;
    align-items: center;
    line-height: 1.4;

    i {
      margin-right: 8px;
      font-size: 16px;
    }
  }

  /* 房间信息表格样式 */
  .room-info-table {
    .el-table {
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

      .el-table__header {
        background-color: #f5f7fa;

        th {
          background-color: #f5f7fa;
          color: #606266;
          font-weight: 600;
        }
      }

      .el-table__body {
        tr:hover {
          background-color: #f5f7fa;
        }
      }
    }
  }

  /* 房间状态标签样式 */
  .room-status-tag {
    .el-tag {
      border-radius: 12px;
      font-weight: 500;
    }
  }

  /* 钥匙授权对话框样式 */
  .key-auth-dialog {
    .el-dialog__body {
      padding: 20px;
    }
  }

  .key-auth-content {

    .user-info-section,
    .room-component-section {
      margin-bottom: 30px;

      h3 {
        margin: 0 0 15px 0;
        color: #2c3e50;
        font-size: 16px;
        font-weight: 600;
        padding-bottom: 8px;
        border-bottom: 2px solid #409eff;
      }
    }

    .user-info-section {
      .el-descriptions {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
    }

    .room-component-section {
      min-height: 400px;

      // 确保Home组件在对话框内正确显示
      .room-table-container {
        min-height: auto;
        padding: 0;
        background: transparent;
      }
    }
  }



  .dialog-footer {
    text-align: right;
    padding: 15px 20px;
    border-top: 1px solid #ebeef5;
    background-color: #fafafa;

    .el-button {
      margin-left: 10px;
      border-radius: 6px;
      font-weight: 500;
    }
  }

  /* 退房确认对话框样式 */
  .checkout-confirm-dialog {
    .el-message-box__content {
      padding: 20px;
    }

    .el-message-box__message {
      line-height: 1.6;
    }

    ul {
      margin: 10px 0;
      padding-left: 20px;

      li {
        margin-bottom: 5px;
        line-height: 1.4;
      }
    }
  }

  /* 退房结果对话框样式 */
  .checkout-result-dialog {
    .el-message-box__content {
      padding: 20px;
    }

    .el-message-box__message {
      line-height: 1.6;
    }

    ul {
      margin: 10px 0;
      padding-left: 20px;

      li {
        margin-bottom: 5px;
        line-height: 1.4;
      }
    }
  }

  /* 退房进度对话框样式 */
  .checkout-progress-content {
    .user-info {
      margin-bottom: 20px;
    }

    .progress-section {
      margin-bottom: 20px;

      .progress-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        .progress-title {
          font-weight: 500;
          color: #303133;
        }

        .progress-text {
          color: #909399;
          font-size: 14px;
        }
      }

      .progress-status {
        margin-top: 10px;
        text-align: center;
      }
    }

    .status-message {
      margin-bottom: 20px;
      padding: 10px 15px;
      background-color: #f0f9ff;
      border-radius: 4px;
      border-left: 4px solid #409eff;
      display: flex;
      align-items: center;

      i {
        margin-right: 8px;
        color: #409eff;
      }

      span {
        color: #303133;
        font-size: 14px;
      }
    }

    .progress-details {
      .details-header {
        margin-bottom: 15px;
        font-weight: 500;
        color: #303133;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .el-table {
        .el-table__header {
          background-color: #f5f7fa;
        }
      }
    }
  }

  /* 同步通知样式 */
  .sync-notification {
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;

    &.el-message--success {
      background: linear-gradient(135deg, #67c23a, #85ce61) !important;
      border: 2px solid #67c23a !important;
      color: white !important;
    }

    &.el-message--error {
      background: linear-gradient(135deg, #f56c6c, #f78989) !important;
      border: 2px solid #f56c6c !important;
      color: white !important;
    }

    &.el-message--warning {
      background: linear-gradient(135deg, #e6a23c, #ebb563) !important;
      border: 2px solid #e6a23c !important;
      color: white !important;
    }

    &.el-message--info {
      background: linear-gradient(135deg, #909399, #a6a9ad) !important;
      border: 2px solid #909399 !important;
      color: white !important;
    }
  }

  /* 通知框样式增强 */
  .el-notification {
    border-radius: 8px !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;

    &.el-notification--success {
      border-left: 4px solid #67c23a !important;
    }

    &.el-notification--error {
      border-left: 4px solid #f56c6c !important;
    }

    &.el-notification--warning {
      border-left: 4px solid #e6a23c !important;
    }

    &.el-notification--info {
      border-left: 4px solid #909399 !important;
    }
  }
</style>
